<template>
    <div>
        <div class="login-box">
        <div class="logo">
            <img src="../../assets/images/logo.png" alt="logo">
        </div>
        <div class="form">
            <div class="phone-number">
                <span class="iconfont icon-shouji icon"></span>
                <input type="text" v-model="phone" placeholder="请输入您的手机号码">
            </div>
            <div class="password">
                <span class="iconfont icon-lock icon"></span>
                <input type="password" v-model="password" placeholder="请输入您的密码">
            </div>
            <!-- <div class="code">
                <span class="icon iconfont icon-yanzhengma"></span>
                <input type="text" v-model="code">
                <button @click="getCode">获取验证码</button>
            </div> -->

            <div class="bottom">
                <div class="login-button" @click="submit">登 陆</div>
                <span class="iconfont icon-arrowright icon" @click="gotocommend"></span>
            </div>

        </div>
    </div>
    </div>
</template>

<script>
    import { Notify } from 'vant';
    import {getLoginCellphone} from "../../api/base"
    export default {
        data() {
            return {
                phone:"",
                // code:"",
                password:""
            }
        },
        methods: {
            // 转到推荐页
            gotocommend(){
                this.$router.push("/")
            },
            // getCode(){
            //     // 1.验证手机号
            //     let reg = /^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/;
            //     if(!reg.test(this.phone)){
            //         Notify({ type: 'warning', message: '请输入正确手机号码' });
            //         return ;
            //     }
            //     // 请求验证码接口
            //     getCaptcha({"phone":this.phone}).then(data=>{
            //         if(data.data){
            //             Notify({ type: 'success', message: '验证码发送成功' });
            //         }else{
            //             Notify({ type: 'danger', message: '验证码发送失败' });
            //         }
            //     })
            // },
            submit(){
                    // window.localStorage.setItem("login","true");
                    // // 个人中心判断是否登录
                    // // this.$router.push("/userInfo")
                    // // 必须登录才能使用
                    // if(window.localStorage.getItem("guidePage")){
                    //     this.$router.push("/recommend")
                    // }else{
                    //     this.$router.push("/guidePage")
                    // }
                // let reg = /^[0-9]{4}$/;
                // if(!reg.test(this.code)){
                //      Notify({ type: 'warning', message: '请输入正确验证码' });
                //      return ;
                // }
                // getCaptchaVerify({
                //     phone: this.phone,
                //     captcha: this.code
                // }).then(data=>{
                    // console.log(data);
                    // if(data.code == 200){
                        getLoginCellphone({
                            password:this.password,
                            phone:this.phone
                        }).then(info=>{
                            console.log(info);
                            if(info.code == 200){
                                Notify({ type: 'success', message: '登录成功' });
                                window.localStorage.setItem("login",info.cookie);
                                window.localStorage.setItem("token",info.token);
                                window.localStorage.setItem("uid",info.account.id);
                                // 必须登录才能使用
                                if(window.localStorage.getItem("guide")){
                                    this.$router.push("/recommend")
                                }else{
                                    this.$router.push("/guide")
                                }
                            }else{
                                Notify({ type: 'warning', message: '密码错误' });
                                return
                            }
                        })

                    // }else{
                    //     Notify({ type: 'danger', message: '登录失败' });
                    // }
                    
                // }).catch(function () {
                //     Notify({ type: 'danger', message: '登录失败' });
                // });
            }
        },
    }
</script>

<style lang="less">
.login-box{
    min-width: 320px;
    max-width: 750px;
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
    z-index: 1500;
    background-color: #f45b57;
    .logo{
        width: 105px;
        height: 105px;
        margin: 95px auto;
        // background-color: yellowgreen;
        border-radius: 8px;
        position: relative;
        img{
            width: 100%;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            border-radius: 8px;
        }
    }
    .form{
        width: 100%;
        .phone-number,.password{
            width: 278px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .icon{
                font-size: 28px;
                color: rgb(243, 242, 242);
            }
            input{
                width: 237px;
                height: 35px;
                background-color: #f45b57;
                border: none;
                outline: none;
                border-bottom: 1px solid rgb(243, 242, 242);
                font-size: 16px;
                color: rgb(243, 242, 242);
                text-indent: 2em;
                &::-webkit-input-placeholder{
                    color: rgb(243, 242, 242);
                }
            }
        }
        .code{
            width: 278px;
            margin: 10px auto;
            display: flex;

            .icon{
                font-size: 28px;
                color: rgb(243, 242, 242);
            }
            input{
                width: 140px;
                height: 35px;
                background-color: #f45b57;
                border: none;
                outline: none;
                border-bottom: 1px solid rgb(243, 242, 242);
                margin-left: 10px;
            }
            button{
                width: 100px;
                text-align: center;
                border: none;
                outline: none;
                background-color: #aaa;
                border-radius: 5px;
                color: rgb(243, 242, 242);
                height: 35px;
                line-height: 36px;
            }
        }
        .bottom{
            width: 278px;
            margin: 90px auto 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .login-button{
                width: 130px;
                height: 35px;
                text-align: center;
                line-height: 35px;
                border: 1px solid rgb(243, 242, 242);
                border-radius: 17.5px;
                font-size: 20px;
                // letter-spacing: 1em;
                color: rgb(243, 242, 242);
            }
            .icon{
                color: rgb(243, 242, 242);
                font-size:20px;
            }
        }
    }
}
</style>